﻿<script setup lang="ts" name="Print">
import useScrollPosition from '@/hooks/scrollPosition'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
import { getPrintInfo } from '@/api/print'
import XEUtils from 'xe-utils'
import useLineColumn3dChartOptions from '@/hooks/charts/otherCharts/lineColumn3dChart'
import type { EChartsOption } from 'echarts'
import img_print from '@/assets/img_print.jpg'
const route = useRoute()

const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)

// 滚动行为
useScrollPosition(route)

const lineColumn3dChartInitOptions = ref<EChartsOption>()

const initData: any = ref({})

const getInitData = () => {
  getPrintInfo(null, { config: { showLoading: false, mockEnable: true } }).then((res: any) => {
    if (res.data) {
      initData.value = res.data
      const { lineColumn3dInitOptions } = useLineColumn3dChartOptions(res.data.lineColumnData, { axis: 'date', columnValue: 'num', lineValue: 'percentage' }, systemConfig)
      lineColumn3dChartInitOptions.value = lineColumn3dInitOptions
      console.log(initData.value)
    }
  })
}
onMounted(() => {
  getInitData()
})
const typeList = ['', 'success', 'info', 'warning', 'danger']

const filterAgeMethod = ({ value, row }) => {
  return row.age >= parseInt(value)
}
const chartPrint = ref({
  id: 'chart', // 要打印的id名 无#号
  popTitle: '&nbsp;', // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
  extraHead: '' // 头部文字 默认空
})
</script>

<template>
  <el-space :size="systemConfig.space" fill direction="vertical">
    <el-card shadow="never" class="anchor-wrap no-border no-radius">
      <template #header>
        <div class="card-header">
          <el-button type="primary" v-print="'#article'">打印文章</el-button>
          <el-button type="primary" v-print="chartPrint">打印图表</el-button>
          <el-button type="primary" v-print="'#img'">打印图片</el-button>
          <el-button type="primary" v-print="'#table'">打印表格</el-button>
          <el-button type="primary" v-print="'#print'">打印页面</el-button>
        </div>
      </template>
      <div class="print-page" id="print">
        <div class="article" id="article">
          <h1>{{ initData.title }}</h1>
          <div class="line-info">
            <div class="num">
              <el-link :underline="false">
                <svg-icon class="el-icon--left" icon="ri:heart-fill"></svg-icon>
                {{ initData.like }}
              </el-link>
              <el-link :underline="false">
                <svg-icon class="el-icon--left" icon="ri:bookmark-3-fill"></svg-icon>
                {{ initData.collect }}
              </el-link>
              <el-link :underline="false">
                <svg-icon class="el-icon--left" icon="ri:chat-2-fill"></svg-icon>
                {{ initData.message }}
              </el-link>
              <el-link :underline="false">
                <svg-icon class="el-icon--left" icon="ri:user-fill"></svg-icon>
                {{ initData.author }}
              </el-link>
            </div>
            <div class="date">{{ initData.date }}</div>
          </div>
          <div class="line-tag">
            <el-tag v-for="(item, idx) in initData.tags" :key="idx" :type="(typeList[XEUtils.random(0, 4)]) as any">
              {{
                item }}
            </el-tag>
          </div>
          <div class="content" v-html="initData.content"></div>
        </div>
        <div class="chart" id="chart"><e-chart v-if="lineColumn3dChartInitOptions" :options="lineColumn3dChartInitOptions" :height="400"></e-chart></div>
        <div class="img-panel" id="img"><img :src="img_print" alt="" /></div>
        <div class="table-panel" id="table">
          <el-table :data="initData.tableData" border stripe style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" width="50" />
            <el-table-column prop="title" label="标题" sortable />
            <el-table-column prop="name" label="姓名" sortable />
            <el-table-column prop="role" label="角色" sortable />
            <el-table-column prop="age" label="年龄" sortable :filters="[{ text: '大于40岁', value: '40' }, { text: '大于80岁', value: '80' }, { text: '大于120岁', value: '120' }]" :filter-method="filterAgeMethod" />
            <el-table-column prop="city" label="城市" />
            <el-table-column prop="date" label="日期" />
          </el-table>
        </div>
      </div>
    </el-card>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.no-border {
  border: none;
}

.no-radius {
  border-radius: 0;
}

.el-card {
  display: flex;
  flex: 1;
  flex-direction: column;

  :deep(.el-card__body) {
    display: flex;
    flex: 1;
    flex-direction: column;
  }
}

.article {

  h1 {
    font-weight: bold;
    font-size: calc(var(--el-font-size-extra-large) * 1.5);
    line-height: 2;
    text-align: center;
  }

  .line-info {
    display: flex;
    padding: 5px 0 10px;

    .num {
      flex: 1;

      .el-link {
        padding-right: 15px;
        color: var(--el-text-color-placeholder);
      }

      .el-link+.el-link {
        padding-left: 15px;
        border-left: 1px solid var(--el-border-color-light);
      }
    }

    .author {
      color: var(--el-text-color-placeholder);
    }

    .date {
      color: var(--el-text-color-placeholder);
    }
  }

  .line-tag {
    margin: 0 -5px;

    .el-tag {
      margin: 5px;
    }
  }

  .content {
    padding: 20px;

    :deep(p) {
      margin: 20px auto;
      text-align: center;
    }
  }
}

.img-panel {
  margin: 20px auto;

  img {
    display: block;
    width: 100%;
  }
}
</style>
